/* 
* 科技有限公司版权所有（）.
* Copyright (c) 2019,   and/or its affiliates. All rights reserved.
* @Date: 2020.09.01 22:47.
* @Author 
* @Description  项目 - 头部
**/
<template>
  <header class="pr-header">
    <div class="pr-login">
      <span><i class="el-icon-s-custom"></i> {{ username }}</span>
      <span class="pr-login-flag" @click="handleLogoutClick">{{ loginFlag }}</span>
    </div>
  </header>
</template>
<script>
import urls from '@/api/urls'
import { postData } from '@/api/'
export default {
  name: "headerBar",
  props: {},
  components: {},
  data() {
    return {
      loginFlag: '退出',
      username: localStorage.getItem('userName'),
    };
  },
  watch: {},
  created() { },
  mounted() { },
  methods: {
    /**
     *@Description
     *@Return 登录 - 退出 事件监听 切换.
     **/
    handleLogoutClick() {
      postData({}, urls.logoutUrl).then(res => {
        console.log('登出接口----', res)
        localStorage.setItem('Authorization', '')
        this.$router.push('/')
        this.loginFlag = '退出'
      })
    }
  },
};
</script>
<style lang="scss" scoped="scoped">
.pr-header {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #dcdcdc;
}
.pr-login {
  float: right;
  font-size: 14px;
}
.pr-login-flag {
  margin: 0 20px;
  cursor: pointer;
  &:hover {
    color: #1890ff;
  }
}
</style>
